<template>
 <div>
  <div id="box" >
    <div
      id="bar"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
    >
      <div id="dot"></div>
    </div>
    <div
      id="bar_after"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
    ></div>
    <span id="text">{{ percentage }}</span>
  </div>

    <div class="page-container">
    <div v-for="(item, index) in content" :key="index" class="list-box">
      <audio ref="audio" src="../assets/By2 - 你并不懂我 - 副本.mp3" controls @loadedmetadata="fillTime($event, index)"
        @timeupdate.stop="updateProgress(index)" @ended.stop="audioEnded(index)">
      </audio>
      <div class="control-row">
        <!-- 控制播放暂停的按钮 -->
        <img src="../assets/image/audio/audio_play.png" class="play-icon" alt="" @click="playAudio(index)" >
        <div class="row-right" >
          <!-- 当前播放时长和总时长 -->
          <div class="time-row">
            <span class="played-time">{{ audioArr.currentTime }}</span>
            <span class="audio-time">{{ audioArr.duration }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
 </div>
 
</template>

<script>
export default {
  data() {
    return {
      percentage: "0%",
       audioNodes: [],    // 用于存放所有 audio 的 DOM 节点
        audioArr: { duration: '', currentTime: '00:00' },       // 用于维护 audio 的总时长和当前播放时间的数组
        content: [           // 存放audio的地址信息，一般是接口返回
            {"audio_name":"20210112_1056.m4a"},

        ]
    };
  },
  watch:{
 percentage(newVal){
      let dot = document.querySelector("#dot");
      let bar_after = document.querySelector("#bar_after");
      dot.style.left= parseInt(newVal)*3>=295?(295+'px'):parseInt(newVal)*3+'px'
      bar_after.style.width=parseInt(newVal)*3+5>=300?(300+'px'):parseInt(newVal)*3+5+'px'
 }
  },
  mounted() {
     this.audioNodes = document.getElementsByClassName('list-box')
  },
  methods: {
    touchstart(e) {
      e.preventDefault();
    },
    touchmove(e) {
      let bar = document.querySelector("#bar");
      let dot = document.querySelector("#dot");
      let bar_width = bar.offsetWidth;
      let bar_after = document.querySelector("#bar_after");
     console.log( this.$refs.audio);
    //   e.preventDefault();
      let moveEndX = e.changedTouches[0].pageX;
      if (moveEndX < 0) {
        moveEndX = 0;
      }
      if (moveEndX >= bar_width - dot.offsetWidth) {
        moveEndX = bar_width - dot.offsetWidth;
      }
      bar_after.style.width = moveEndX + 5 >= 300 ? 300 + "px" : moveEndX + 5 + "px";
       this.$refs.audio[0].currentTime = this.$refs.audio[0].duration * (moveEndX/300); 
      //   bar_after.style.right = bar_width - moveEndX + "px";
      if (moveEndX >= 285) {
        dot.style.left = 285 + "px";
      } else if (moveEndX <= 0) {
        dot.style.left = 0 + "px";
      } else {
        dot.style.left = moveEndX + "px";
      }
      
      //   dot.style.left = moveEndX >=285?(285 + "px"):( moveEndX +  "px")||moveEndX <=0?0+'px':moveEndX+'px'
      let bili = parseInt((moveEndX / (bar_width - dot.offsetWidth)) * 100);
      if (bili > 100) {
        this.percentage = "100%";
      } else if (bili < 0) {
        this.percentage = "0%";
      } else {
        this.percentage = bili + "%";
      }
    },

    touchend(e) {
    //   e.preventDefault();
      let bar = document.querySelector("#bar");
      let dot = document.querySelector("#dot");
      let bar_width = bar.offsetWidth;
      let bar_after = document.querySelector("#bar_after");
      let moveEndX = e.changedTouches[0].pageX;
      bar_after.style.width = moveEndX + 5 >= 300 ? 300 + "px" : moveEndX + 5 + "px";
      this.$refs.audio[0].currentTime = this.$refs.audio[0].duration * (moveEndX/300); 
      //   bar_after.style.right = bar_width - moveEndX + "px";
      if (moveEndX >= 295) {
        dot.style.left = 295 + "px";
      } else if (moveEndX <= 0) {
        dot.style.left = 0 + "px";
      } else {
        dot.style.left = moveEndX + "px";
      }
      // dot.style.left = moveEndX >=285?(285 + "px"):( moveEndX +  "px")||moveEndX <=0?0+'px':moveEndX+'px';
      let bili = parseInt((moveEndX / (bar_width - dot.offsetWidth)) * 100);
      if (bili > 100) {
        this.percentage = "100%";
      } else if (bili < 0) {
        this.percentage = "0%";
      } else {
        this.percentage = bili + "%";
      }
    },


       // 切换播放，暂停按钮的事件
      playAudio(index) {
        let audio = this.audioNodes[index].firstChild
        if (audio.paused) {
          audio.play()
        } else {
          audio.pause()
        }
      },
      
      // 获取音频的总时长
      fillTime(event, index) {
        this.audioArr.duration = this.transTime(event.target.duration)
      },

      // 将秒数转化成(分:秒)格式
      transTime(time) {
        let duration = parseInt(time)
        let minute = parseInt(duration / 60).toString().padStart(2, '0')
        let sec = (duration % 60).toString().padStart(2, '0')
        return `${minute}:${sec}`
      },

      // 进度条播放的事件
      updateProgress(index) {
        let audio = this.audioNodes[index].firstChild
        let value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * 100, 0)
        this.audioArr.currentTime = this.transTime(audio.currentTime)
        // let progressTag = this.audioNodes[index].getElementsByClassName('pgs-play')[0]
        // progressTag.style.left = `${value}%`
        this.percentage=`${value}%`
        
      },

      // 播放结束的处理动作
      audioEnded(index) {
        let audio = this.audioNodes[index].firstChild
        audio.currentTime = 0
        audio.pause()
      },
    
  },
};
</script>

<style lang="less" scoped>
#box {
  width: 300px;
  height: 100px;
  position: absolute;
  top: 300px;
  color: #ffffff;
  background-color: #3f3e3e;
}
#bar {
  width: 300px;
  height: 10px;
  border-radius: 10px;
  background: #ffffff;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
}
#bar_after {
  width: 0px;
  height: 10px;
  border-radius: 10px;
  background: #1dcb93;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 320px;
  margin: auto;
  cursor: pointer;
}
#dot {
  width: 5px;
  height: 15px;
  background: #1dcb93;
  position: absolute;
  bottom: 0;
  top: 0;
  margin: auto 0;
  border-radius: 50%;
  cursor: pointer;
}
#text {
  font-size: 20px;
}





  .page-container {
    .pgs {
      width: 200px;
      background-color: #D8D4D1;
      text-align: center;
      position: relative;
      height: 2px;
      margin-bottom: 10px;
    }

    .pgs-play {
      position: absolute;
      top: -2.5px;
      left: 0;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #B03F28;
      z-index: 1;
    }

    .play-icon {
      width: 45px;
      height: 45px;
      margin-right: 15px;
    }

    audio {
      display: block;
      height: 0;
    }

    .audio-box {
      background: #F5F5F5;
      border: 1px solid #D8D4D1;
      border-radius: 5px;
      width: 100%;
      padding: 15px 12px;
      box-sizing: border-box;
    }

    .audio-name {
      font-size: 15px;
      color: #252120;
      margin-bottom: 15px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
    }

    .control-row {
      display: flex;
      align-items: flex-end;
    }

    .row-right {
        width: 100px;
      flex-grow: 100;
    }

    .time-row {
      position: relative;
      color: #B0AFAD;
      font-size: 12px;
      margin-bottom: 3px;
    }

    .audio-time {
      position: absolute;
    //   right: 0;
    left: 180px;
    }
  }
</style>